<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.project_name" class="search-input" clearable placeholder="请输入项目名称"/>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.salary_type" clearable style="width: 200px" placeholder="请选择资金类型">
                        <Option value="1">质保金</Option>
                        <Option value="2">抵押金</Option>
                        <Option value="3">保证金</Option>
                        <Option value="99">其他</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="search()">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="success" @click="add()">
                        <Icon type="md-add"/>
                        添加
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom export></vxe-toolbar>
            <vxe-table
                    border
                    show-overflow
                    :tooltip-config="{theme:'light',enterable:true}"
                    resizable
                    highlight-hover-row
                    :export-config="{}"
                    size="medium"
                    align="center"
                    header-align="center"
                    :loading="tableLoading"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="序号" width="70"></vxe-table-column>
                <vxe-table-column width="200" field="project_name" title="项目名称"></vxe-table-column>
                <vxe-table-column width="200" field="salary_type" title="资金类型">
                    <template v-slot="{row}">
                        <span v-if="row.salary_type === '1'">质保金</span>
                        <span v-if="row.salary_type === '2'">抵押金</span>
                        <span v-if="row.salary_type === '3'">保证金</span>
                        <span v-if="row.salary_type === '99'">其他</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="200" field="salary_limit" title="资金额度(万元)"></vxe-table-column>
                <vxe-table-column width="200" field="salary_source" title="资金来源">
                    <template v-slot="{row}">
                        <span v-if="row.salary_source == '1'">个人缴纳</span>
                        <span v-if="row.salary_source == '2'">企业缴纳</span>
                        <span v-if="row.salary_source == '3'">社会机构缴纳</span>
                        <span v-if="row.salary_source == '99'">其他</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="200" field="project_cycle" title="项目周期"></vxe-table-column>
                <vxe-table-column width="200" field="return_cycle" title="返还周期">
                    <template v-slot="{row}">
                        <span v-if="row.return_cycle === '2'">周返还</span>
                        <span v-if="row.return_cycle === '3'">月返还</span>
                        <span v-if="row.return_cycle === '4'">季度返还</span>
                        <span v-if="row.return_cycle === '5'">年度返还</span>
                        <span v-if="row.return_cycle === '99'">其他</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="200" field="fill_state" title="填报状态">
                    <template v-slot="{row}">
                        <span v-if="row.fill_state === '0'">草稿</span>
                        <span v-if="row.fill_state === '1'">填报已完成</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column width="200" field="account_bank" title="开户银行"></vxe-table-column>
                <vxe-table-column width="200" field="office_name" title="填报部门"></vxe-table-column>
                <vxe-table-column width="280" fixed="right" field="action" title="操作">
                    <template v-slot="{row}">
                        <!-- <Button v-if="row.fill_state != '1' && row.create_by === userId" type="success" size="small" class="action-btn" @click="edit(row)">编辑
                        </Button> -->
                        <Button type="primary" size="small" class="action-btn" @click="createItem(row)" v-if="row.create_by === userId&&row.fill_state != '1'">补充提报</Button>
                        <Button type="info" size="small" class="action-btn" @click="info(row)">详情
                        </Button>
                        <Button v-if="row.create_by === userId" type="error" size="small" class="action-btn" @click="deleted(row)">删除                        </Button>
                         <!-- ---切换隐藏显示---------- -->
              <!-- warning v-if="row.fill_state != '1' && row.create_by === userId"type="primary" size="small" class="action-btn" -->
                        <Button v-if="row.create_by === userId&&row.fill_state === '0'" type="success" size="small" class="action-btn" @click="completed(row)">确认提交
                        </Button>
                        <Button v-if="row.create_by === userId&&row.fill_state === '1'" type="warning" size="small" class="action-btn" @click="uncompleted(row)">取消提交
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page :total="pageObj.totalRecord" show-sizer show-total @on-change="pageChange" @on-page-size-change="pageChangeS" />
        </Row>
        <Modal
                v-model="modalInfo"
                title="详情"
                width="1000"
                :loading="loading"
                >
            <Form ref="formItem"  :model="formItemInfo" label-position="top">
                <Row :gutter="16">
                    <Col span="8">
                        <FormItem prop="project_name" label="填报项目名称:">
                            <Input v-model="formItemInfo.project_name" disabled  placeholder="填报项目名称"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="资金类型" prop="salary_type" class="dx">
                            <RadioGroup v-model="formItemInfo.salary_type"   placeholder="请选择资金类型">
                                <Radio label="1" disabled>质保金</Radio>
                                <Radio label="2" disabled>抵押金</Radio>
                                <Radio label="3" disabled>保证金</Radio>
                                <Radio label="99" disabled>其他</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="8" v-if="this.formItemInfo.salary_type === '99'">
                        <FormItem prop="other_salary_type"  label="其他资金类型:">
                            <Input v-model="formItemInfo.other_salary_type" disabled placeholder="请填报其他资金类型"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="8">
                        <FormItem prop="salary_limit" label="资金额度:">
                            <Input v-model="formItemInfo.salary_limit" type="number" disabled placeholder="请填报资金额度">
                                <span slot="append">万元</span>
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="资金来源" prop="salary_source" class="dx">
                            <Select v-model="formItemInfo.salary_source" disabled placeholder="请选择资金来源" style="width: 300px">
                                <Option value="1">个人缴纳</Option>
                                <Option value="2">企业缴纳</Option>
                                <Option value="3">社会机构缴纳</Option>
                                <Option value="99">其他</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8" v-if="this.formItemInfo.salary_source === '99'">
                        <FormItem prop="other_salary_source" label="其他资金来源:">
                            <Input v-model="formItemInfo.other_salary_source" disabled placeholder="请填报其他资金来源"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="8">
                        <FormItem prop="project_cycle" label="项目周期:">
                            <Input v-model="formItemInfo.project_cycle" disabled placeholder="请填报项目周期"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="返还周期:" prop="return_cycle" class="dx">
                            <RadioGroup v-model="formItemInfo.return_cycle" disabled  placeholder="请选择返还周期">
<!--                                <Radio label="1" disabled>一次性</Radio>-->
                                <Radio label="2" disabled>周返还</Radio>
                                <Radio label="3" disabled>月返还</Radio>
                                <Radio label="4" disabled>季度返还</Radio>
                                <Radio label="5" disabled>年度返还</Radio>
                                <Radio label="99" disabled>其他</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="8" v-if="this.formItemInfo.return_cycle === '99'">
                        <FormItem prop="other_return_cycle" label="其他返还周期:">
                            <Input v-model="formItemInfo.other_return_cycle" disabled placeholder="请填报其他返还周期"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="24">
                        <FormItem prop="account_bank" label="开户银行:">
                            <CheckboxGroup v-model="formItemInfo.account_bank"  placeholder="请选择开户银行">
                                <Checkbox label="盛京银行" disabled></Checkbox>
                                <Checkbox label="中国工商银行" disabled></Checkbox>
                                <Checkbox label="中国建设银行" disabled></Checkbox>
                                <Checkbox label="中国农业银行" disabled></Checkbox>
                                <Checkbox label="中国银行" disabled></Checkbox>
                                <Checkbox label="中国交通银行" disabled></Checkbox>
                                <Checkbox label="中国邮政储蓄银行" disabled></Checkbox>
                                <Checkbox label="中信银行" disabled></Checkbox>
                                <Checkbox label="光大银行" disabled></Checkbox>
                                <Checkbox label="招商银行" disabled></Checkbox>
                                <Checkbox label="浦发银行" disabled></Checkbox>
                                <Checkbox label="民生银行" disabled></Checkbox>
                                <Checkbox label="华夏银行" disabled></Checkbox>
                                <Checkbox label="平安银行" disabled></Checkbox>
                                <Checkbox label="兴业银行" disabled></Checkbox>
                                <Checkbox label="广发银行" disabled></Checkbox>
                                <Checkbox label="渤海银行" disabled></Checkbox>
                                <Checkbox label="浙商银行" disabled></Checkbox>
                                <Checkbox label="恒丰银行" disabled></Checkbox>
                                <Checkbox label="其他" disabled></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="5" v-if="check">
                        <FormItem prop="other_account_bank" label="其他开户银行:">
                            <Input v-model="formItemInfo.other_account_bank" disabled placeholder="填报其他开户银行"/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalInfo = false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  superviseselectByPage,
  supervisesdelete,
  superupdateFillState
} from '@/api/setting/capital'

export default {
  name: 'projectCapitalList',
  data () {
    return {
      check: false,
      userId: '',
      searchObj: {
        project_name: '',
        salary_type: ''
      },
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      modalInfo: false,
      loading: true,
      formItemInfo: {
        project_name: '',
        salary_type: '',
        other_salary_type: '',
        salary_limit: '',
        salary_source: '',
        other_salary_source: '',
        project_cycle: '',
        return_cycle: '',
        other_return_cycle: '',
        account_bank: []
      }
    }
  },
  methods: {
    init () {
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      // console.log(this.userId, 'userId')
      superviseselectByPage().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
          // console.log(ret, '列表')
        } else {
          this.$Message.error('数据加载失败！！！' + ret.data.errmsg)
        }
      })
    },
    add () {
      this.$router.push({
        name: 'capitalSuperviseCapital',
        query: { vtype: '1' }
      })
    },
    // edit (row) {
    //   console.log(row, '修改')
    //   this.$router.push({
    //     name: 'capitalSuperviseCapital',
    //     query: {
    //       para: row
    //     }
    //   })
    // },
    info (row) {
      this.formItemInfo = row
      let banks = this.formItemInfo.account_bank.toString()
      if (banks.indexOf('其他') >= 0) {
        this.check = true
      } else {
        this.check = false
      }
      // this.modalInfo = true
      this.$router.push({
        name: 'superviseMatterDetail',
        query: { id: row.id, aa: row }
      })
    },
    deleted (row) {
      this.$Modal.confirm({
        title: '您确认删除吗？',
        content: '<p>一旦删除不可恢复</p>',
        loading: true,
        onOk: async () => {
          supervisesdelete({ id: row.id }).then(ret => {
            if (ret.data.errcode === 0) {
              setTimeout(() => {
                this.$Modal.remove()
                this.$Message.success('删除成功')
              }, 1000)
              this.init()
            } else {
              this.$Message.error('删除失败！！！' + ret.data.errmsg)
            }
          })
        }
      })
    },
    create (row) {
      this.$router.push({
        name: 'addCapital',
        query: { id: row.id, vtype: '1', project_name: row.project_name }
      })
    },
    createItem (row) {
      this.$router.push({
        name: 'editCapital',
        query: { id: row.id, vtype: '2', project_name: row.project_name, para: row }
      })
    },
    completed (row) {
      this.$Modal.confirm({
        title: '确认提交？',
        loading: true,
        onOk: async () => {
          let data = {
            id: row.id,
            fill_state: '1'
          }
          superupdateFillState(data).then(ret => {
            if (ret.data.errcode === 0) {
              setTimeout(() => {
                this.$Modal.remove()
                this.$Message.success('确认提交成功')
              }, 1000)
              this.init()
            } else {
              this.$Modal.remove()
              this.$Message.error('确认提交失败！！！' + ret.data.errmsg)
            }
          })
        }
      })
    },
    uncompleted (row) {
      this.$Modal.confirm({
        title: '确认取消提交？',
        loading: true,
        onOk: async () => {
          let data = {
            id: row.id,
            fill_state: '0'
          }
          superupdateFillState(data).then(ret => {
            if (ret.data.errcode === 0) {
              setTimeout(() => {
                this.$Modal.remove()
                this.$Message.success('取消提交成功')
              }, 1000)
              this.init()
            } else {
              this.$Message.error('取消提交失败！！！' + ret.data.errmsg)
            }
          })
        }
      })
    },
    search () {
      this.tableLoading = true
      let data = {
        project_name: this.searchObj.project_name,
        salary_type: this.searchObj.salary_type
      }
      superviseselectByPage(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Message.error('数据加载失败！！！' + ret.data.errmsg)
        }
      })
    },
    pageChange (current) {
      this.tableLoading = true
      let data = {
        project_name: this.searchObj.project_name,
        salary_type: this.searchObj.salary_type,
        pageNo: current
      }
      superviseselectByPage(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Message.error('数据加载失败！！！' + ret.data.errmsg)
        }
      })
    },
    pageChangeS (val) {
      this.tableLoading = true
      let data = {
        pageSize: val
      }
      superviseselectByPage(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Message.error('数据加载失败！！！' + ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="less">
    .container {
        margin-bottom: 50px;
    }

    .container /deep/ .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px !important;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 3px;
    }
</style>
